이곳은 개발을 위한 베타 사이트 입니다.기여내역은 언제든 초기화될 수 있으며, 예기치 못한 오류가 발생할 수 있습니다.문서의 임의 삭제는 제재 대상으로, 문서를 삭제하려면 삭제 토론을 진행해야 합니다. 문서 보기문서 삭제토론 나무위키:문법 도움말 (문단 편집) === 텍스트 배경 그라데이션 효과 === {{{#red '''주의'''}}}: 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다. {{{{{{#!wiki style="background-image: linear-gradient(, #<헥스 코드 1>, #<헥스 코드 2>)" }}}}}} 이 문법은 글자의 배경에 [[그라데이션]]을 넣는 기능입니다. (텍스트 뿐만 아니라 테이블의 셀 배경으로 적용 또한 가능함) {{{<헥스 코드 1, 2>}}} 자리에 자신이 넣고 싶은 여섯 자리의 [[헥스 코드]]들을 찾아서 입력해 주세요. 그러데이션의 여백을 조절하고 싶다면 위 문법에 {{{margin: (세로 여백 조절 숫자)px (가로 여백 조절 숫자)px; }}}을 추가로 입력하여 조절해 주세요. 그라데이션의 크기를 조절하고 싶다면 위 문법에 {{{padding: (세로 크기 조절 숫자)px (가로 크기 조절 숫자)px; }}}을 추가로 입력하여 조절해 주세요. 그러데이션의 방향을 설정하고 싶다면 {{{}}} 자리에 to left, to right, to top, to bottom 중에서 하나를 입력해 주세요. * 왼쪽에서 오른쪽: {{{to right}}} * 오른쪽에서 왼쪽: {{{to left}}} * 위에서 아래 {{{to bottom}}} * 아래에서 위: {{{to top}}} * 북동쪽 방향 대각선: {{{to top right}}} 또는 {{{to right top}}} * 동남쪽 방향 대각선: {{{to bottom right}}} 또는 {{{to right bottom}}} * 남서쪽 방향 대각선: {{{to bottom left}}} 또는 {{{to left bottom}}} * 북서쪽 방향 대각선: {{{to top left}}} 또는 {{{to left top}}} 그라데이션의 각도를 세세하게 조절하고 싶다면 {{{}}} 대신 {{{<숫자deg>}}} 문법을 사용해 보세요. {{{숫자}}} 안의 각도 숫자를 자유자재로 조절할 수 있습니다. 아래는 예시입니다. * 북쪽 방향: {{{0deg}}} * 북동쪽 방향: {{{45deg}}} * 동쪽 방향: {{{90deg}}} * 남동쪽 방향: {{{135deg}}} * 남쪽 방향: {{{180deg}}} * 남서쪽 방향: {{{225deg}}} * 서쪽 방향: {{{270deg}}} * 북서쪽 방향: {{{315deg}}} 상기의 문법을 동시에 사용한 예시입니다. {{{{{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #FFB9B9, #FFFDBB)" 그라데이션 기능입니다}}}}}} {{{#!wiki style="margin: -5px 0px; padding: 5px 10px; background-image: linear-gradient(to right, #FFB9B9, #FFFDBB)" 그라데이션 기능입니다}}} 또다른 예시입니다. {{{{{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(135deg, #FFB9B9, #FFD3B6, #FFFDBB, #B4ECB4, #ACE1FF, #F6C3FF)" 그라데이션 기능입니다 하하하! 무지개색 총공격!}}}}}} {{{#!wiki style="margin: -5px 0px; padding: 5px 10px; background-image: linear-gradient(135deg, #FFB9B9, #FFD3B6, #FFFDBB, #B4ECB4, #ACE1FF, #F6C3FF)" 그라데이션 기능입니다 하하하! 무지개색 총공격!}}} [anchor(tablegra)] 표 문법 안에 넣어서 활용하는 방법도 있습니다. {{{|| {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #00A495, #13AD65)" {{{#FFFFFF '''나무위키'''}}}[br]{{{#FFFFFF '''고유 컬러'''}}}}}} ||}}} || {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #00A495, #13AD65)" {{{#FFFFFF '''나무위키'''}}}[br]{{{#FFFFFF '''고유 컬러'''}}}}}} || 헥스 코드를 여러번 입력하여 색과 색 사이의 경계를 좀 더 뚜렷하게 만들어 다양한 시도를 할 수 있습니다. {{{|| {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)" {{{#FFFFFF '''안녕하세요'''}}}[br][br][br]{{{#FFFFFF '''여러분'''}}}}}} ||}}} || {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)" {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} || 헥스 코드 바로 오른쪽에 퍼센테이지를 붙여서 각 색이 차지하는 크기 및 비율을 조절하는 방법도 있습니다. * {{{linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)"}}} #AFEEEE로 시작하고, 왼쪽에서 65% 지점 이후부터 #4682B4로 전환되기 시작한 후, 왼쪽에서 80% 지점부터 순수한 #4682B4로 완전히 전환되어 종료되는 그라데이션 {{{|| {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)" {{{#FFFFFF '''안녕하세요'''}}}[br][br][br]{{{#FFFFFF '''여러분'''}}}}}} ||}}} || {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)" {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} || * {{{linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)"}}} #AFEEEE로 시작하고, 왼쪽에서 60% 지점부터 순수한 #4682B4로 완전히 전환된 후, #C0D84D로 종료되는 그라데이션 {{{|| {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)" {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||}}} || {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)" {{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} || 오른쪽 색상의 지정 위치가 왼쪽 색상보다 작거나 같을 경우, 그라데이션 효과가 사라지고 왼쪽 색상에 지정한 위치에서 색이 나누어집니다. * {{{linear-gradient(to right, #C9151E 30%, #D1EAFF 0%)}}} * {{{linear-gradient(to right, #C9151E 58%, #D1EAFF 57%)}}} * {{{linear-gradient(to right, #C9151E 70%, #D1EAFF 70%)}}} * {{{linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%)}}} || {{{#!wiki style="margin: -5px -10px; padding:5px; background-image: linear-gradient(to right, #C9151E 30%, #D1EAFF 0%)" {{{#C9151E '''30%'''}}}}}}|| || {{{#!wiki style="margin: -5px -10px; padding:5px; background-image: linear-gradient(to right, #C9151E 58%, #D1EAFF 57%)" {{{#C9151E '''58%'''}}}}}}|| || {{{#!wiki style="margin: -5px -10px; padding:5px; background-image: linear-gradient(to right, #C9151E 70%, #D1EAFF 70%)" {{{#C9151E '''70%'''}}}}}}|| || {{{#!wiki style="margin: -5px -10px; padding:5px; background-image: linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%)" {{{#C9151E '''70%'''}}}}}}||저장 버튼을 클릭하면 당신이 기여한 내용을 CC-BY-NC-SA 2.0 KR으로 배포하고,기여한 문서에 대한 하이퍼링크나 URL을 이용하여 저작자 표시를 하는 것으로 충분하다는 데 동의하는 것입니다.이 동의는 철회할 수 없습니다.캡챠저장미리보기